{% extends "layout_index.html" %}
{% load static %}

{% block title %}
    <title>修改密码</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/add.css' %}">
    <style>
        /* 自定义成功消息样式 */
        .success-message {
            background-color: #28a745;
            color: white;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            position: relative;
            animation: fadeIn 0.5s;
        }
        .success-message .close {
            position: absolute;
            right: 10px;
            top: 10px;
            color: white;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
{% endblock %}

{% block main_content %}
    <div class="form-container">
        <div class="form-header">
            <h3><i class="fa-solid fa-key"></i> 修改密码</h3>
        </div>
        
        {% if messages %}
            {% for message in messages %}
                {% if message.tags == 'success' %}
                <div class="success-message" id="successMessage">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <i class="fa fa-check-circle"></i> {{ message }}
                </div>
                {% else %}
                <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {% endif %}
            {% endfor %}
        {% endif %}

        <form method="post" novalidate>
            {% csrf_token %}
            {% for field in form %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                    {% if field.help_text %}
                        <small class="form-text text-muted">{{ field.help_text }}</small>
                    {% endif %}
                    {% if field.errors %}
                        <span class="text-danger">
                            <i class="fa-solid fa-circle-exclamation"></i> 
                            {{ field.errors.0 }}
                        </span>
                    {% endif %}
                </div>
            {% endfor %}
            <div class="btn-container">
                <a href="{% url 'index' %}" class="btn btn-back">
                    <i class="fa-solid fa-arrow-left"></i> 返回首页
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-save"></i> 保存修改
                </button>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
<script>
    $(document).ready(function() {
        // 自动聚焦第一个输入框
        $('form input:first').focus();
        
        // 检查是否有成功消息
        var successMessage = $('#successMessage');
        if (successMessage.length > 0) {
            // 2秒后跳转到登录页面
            setTimeout(function() {
                window.location.href = "{% url 'login' %}";
            }, 2000);
        }
        
        // 自动隐藏消息提示
        setTimeout(function() {
            $('.alert').fadeOut('slow');
        }, 3000);
    });
</script>
{% endblock %}